<template>
	<uni-popup ref="signModal" :is-mask-click="false">
		<view class="signModal">
			<view class="signModal-head">
				授权签约
			</view>
			<view class="signModal-close" @click="close">
				<uni-icons type="closeempty" size="20" color="#aaa"></uni-icons>
			</view>
			<view class="signModal-content">
				<view class="sign-list" v-if="isBatch">
					<checkbox-group @change="onCheckChange">
						<view class="sign-item" v-for="(item, index) in signList" :key="index">
							<view class="sign-item-content">
								{{ item.content }}
							</view>
							<view class="sign-item-check">
								<checkbox :value="item.id" :checked="item.check" style="transform:scale(0.7)"></checkbox>
							</view>
						</view>
					</checkbox-group>
				</view>
				<view v-if="!isBatch">
					<view v-if="loadingOrderSign">
						您的运单{{ billNo }}尚未完成运输协议签订，请及时完成签约
					</view>
					<view v-if="receiverSign" :style="'margin-top:' + (loadingOrderSign ? '30rpx' : '0')">
						{{ payeeName }}（手机号{{ payeeMobile }}），申请您授权平台运费代收权限，请及时处理
					</view>
				</view>
			</view>
			<view class="signModal-footer">
				<button class="reset-button cancel-btn" @click="close">暂不签约</button>
				<button class="reset-button confirm-btn" @click="goSign">去签约</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			isBatch: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				signList: [],
				
				billNo: "",
				loadingOrderId: "",
				loadingOrderSign: null, //这个不为空就是需要签约运输协议
				
				isExistAbolish: "", //这个为1的时候表示委托收款协议只需要预览不需要真正签约
				receiverSign: null, //这个不为空是要签约委托收款协议
				
				payeeMobile: "",
				payeeName: "",

			}
		},
		watch: {
			show(newValue, oldValue) {
				if (newValue) {
					this.$refs.signModal.open()
				} else {
					this.$refs.signModal.close()
				}
			}
		},
		mounted() {
			if (this.isBatch) {
				uni.removeStorageSync('backHomeIsSign')
			}
		},
		methods: {
			beforeShow(data) {
				console.log(data)
				return new Promise((resolve, reject) => {
					let that = this
					if (this.isBatch) {
						if (uni.getStorageSync('backHomeIsSign') == 1) {
							resolve(false)
							return false
						}
						that.signList = []
						that.wxRequest({
							url: `${that.API}/driverMessageCertification/queryList`,
							method: 'POST',
							data: {
								"driverId": uni.getStorageSync(that.DATA_KEY.userInfo).driverId, 
								"pageNum": 1,
								"pageSize": 5,
								"type":"2",
								titleTypes: [13, 14],
								etpId: uni.getStorageSync(this.DATA_KEY.etpId)
							},
							title: '加载中...',
							success: res => {
								console.log(res)
								let list = res.data.data.list;
								if (list && list.length > 0) {
									that.signList = list
									that.signList.forEach(item => {
										item.check = true
									})
									resolve(true)
								} else {
									resolve(false)
								}
							},
							fail: err => {
								resolve(false)
							}
						})
					} else {
						that.wxRequest({
							url: `${that.API}/forceSign/findForceSign?loadingOrderId=${data.loadingOrderId}`,
							method: 'GET',
							data: {},
							title: '加载中...',
							success: res => {
								console.log(res)
								if (res.data.data) {
									that.billNo = data.billNo
									that.loadingOrderId = data.loadingOrderId
									that.loadingOrderSign = res.data.data.loadingOrderSign
									that.isExistAbolish = res.data.data.isExistAbolish
									that.receiverSign = res.data.data.receiverSign
									if (that.receiverSign) {
										var reg = /^(\d{3})\d*(\d{4})$/;
										let payeeMobile = that.receiverSign.payeeMobile
										that.payeeMobile = payeeMobile.replace(reg,'$1****$2')
										that.payeeName = that.receiverSign.contentJson.payeeName
									}
									if (that.loadingOrderSign || that.receiverSign) {
										resolve(true)
									} else {
										resolve(false)
									}
								} else {
									resolve(false)
								}
							},
							fail: err => {
								resolve(false)
							}
						})
					}
				})
			},
			onCheckChange(e) {
				var items = this.signList,
				  	values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.id)){
						this.$set(item,'check',true)
					}else{
						this.$set(item,'check',false)
					}
				}
			},
			close() {
				this.$emit('close')
			},
			goSign() {
				if (this.isBatch) {
					let checkList = this.signList.filter(item => item.check)
					if (!checkList.length) {
						uni.showToast({
							title: "请选择您要签约的协议",
							icon: "none"
						})
						return
					}
					let ids = checkList.map(item => item.id).join(',')
					//#ifdef MP-WEIXIN
					uni.navigateTo({
						url: "/pages/sign/signPreview?isBatch=1" + "&ids=" + ids
					})
					//#endif
					//#ifdef APP-PLUS
					uni.navigateTo({
						url: "/pages/sign/signPreview?isBatch=1" + "&ids=" + ids + '&navType=switchTab&navUrl=/pages/index/taskhome'
					})
					//#endif
				} else {
					//#ifdef MP-WEIXIN
					uni.navigateTo({
						url: "/pages/sign/signPreview?isBatch=0" + "&loadingOrderId=" + this.loadingOrderId
					})
					//#endif
					//#ifdef APP-PLUS
					uni.navigateTo({
						url: "/pages/sign/signPreview?isBatch=0" + "&loadingOrderId=" + this.loadingOrderId + '&navType=switchTab&navUrl=/pages/index/taskhome' 
					})
					//#endif
					
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	$color-primary: #2B7CFF;
	.reset-button {
		padding: 0;
		margin: 0;
		font-size: inherit;
		background-color: transparent;
		color: inherit;
		position: relative;
		border: 0rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		vertical-align: baseline;
		transform: translate(0, 0);
	}
	.reset-button.button-hover {
		transform: translate(1px, 1px);
		background: none;
	}
	
	.reset-button::after {
		border: none;
	}
	.signModal {
		background-color: #fff;
		width: 640rpx;
		border-radius: 20rpx;
		.signModal-head {
			padding: 30rpx;
			font-size: 32rpx;
			text-align: center;
		}
		.signModal-close {
			position: absolute;
			right: 15px;
			top: 15px;
		}
		.signModal-content {
			padding: 40rpx;
			font-size: 28rpx;
			color: #333;
			.sign-list {
				.sign-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;
					.sign-item-content {
						font-size: 28rpx;
						color: #333;
					}
					.sign-item-check {
						margin-left: 30rpx;
					}
				}
			}
		}
		.signModal-footer {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0 30rpx;
			.cancel-btn {
				background: #ccc;
				margin-right: 32rpx;
				width: 180rpx;
				height: 70rpx;
				color: #fff;
				border-radius: 8rpx;
				font-size: 28rpx;
			}
			.confirm-btn {
				background: #4089ff;
				width: 180rpx;
				height: 70rpx;
				color: #fff;
				border-radius: 8rpx;
				font-size: 28rpx;
			}
		}
	}
	
</style>